<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <button @[someEvent]="handleSomeEvent()">click</button>
    <!-- <button v-ping:[someEvent]="handleSomeEvent()">click</button> -->
    <HelloWorld msg="Welcome to Your Vue.js App">
      <!-- 这里会带有 slot 的默认属性， 这个{user} 是从 slot 中解构出来的-->
      <template #row="{user}"> fuck{{ user.b }} </template>
      <template #header="{user}"> fuck{{ user.b }} </template>
    </HelloWorld>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue"

export default {
  name: "Home",
  components: {
    HelloWorld
  },
  data() {
    return {
      count: 8
    }
  },
  computed: {
    someEvent() {
      return this.count === 10 ? "ping" : "pong"
    }
  },
  mounted() {
    console.log(this.someEvent)
    setTimeout(() => {
      console.log("change")
      this.count = 10
      console.log(this.someEvent)
    }, 3000)
  },
  methods: {
    handleSomeEvent() {
      console.log("enter", this.count, this.someEvent)
      return "fuck"
    }
  }
}
</script>
